<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>小魅</title>
    {% load static %}
    <!--suppress HtmlUnknownTarget -->
    <link rel="stylesheet" href="{% static 'css/navbar.css' %}">
    <style>
        body {
            text-align: center;
        }

        .rainbow {
            background: linear-gradient(to right, red, orange, yellow, green, cyan, blue, violet);
            -webkit-background-clip: text;
            color: transparent;
            display: inline; /* 确保文字不会被其他布局属性影响 */
            font-size: 100px;
        }

        .menu {
            max-width: 400px;
            margin: 40px auto;
            padding: 30px 20px;
            background-color: #ffffff;
            border-radius: 16px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        .menu a {
            display: inline-block;
            width: 80%; /* 所有按钮宽度一致 */
            margin: 10px 0;
            padding: 10px 20px;
            background: linear-gradient(135deg, #6dd5ed, #2193b0); /* 渐变蓝色 */
            color: white;
            text-decoration: none;
            font-weight: bold;
            border-radius: 12px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .menu a:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
            background: linear-gradient(135deg, #2193b0, #6dd5ed); /* 渐变反转 */
        }

    </style>
</head>
<body>
{% include "includes/navbar.html" %}
<h1 class="rainbow">Hello World!</h1>
<div class="menu">
    <a href="/inquiry">查询他人金币</a>
    <br/>
    <a href="/tic_tac_toe">井字棋</a>
    <br/>
    <a href="/minesweeper">扫雷</a>
    <br/>
    <a href="/p24">24点</a>
    <br/>
    <a href="/stick_pin">见缝插针</a>
    <br/>
    <a href="/mei_vue/#/2048">2048</a>
    <br/>
    <a href="/mei_vue/#/Tetris">俄罗斯方块</a>
</div>
</body>
</html>
